﻿<html>
<head>
    <title>XSockets - WeAreTheRealTimeWeb</title>
    <script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="/Scripts/swfobject.js" type="text/javascript"></script>
    <script src="/Scripts/json2.js" type="text/javascript"></script>
    <script src="/Scripts/jXSockets.WebSockets.Detector-1.0.4.beta.js" type="text/javascript"></script>        
    <script src="/Scripts/JXSockets-1.0.4.beta.js" type="text/javascript"></script>
    
    <script type="text/javascript">
        var ws = null;

        $(function () {
            hideChatElements();

            ws = new jXSockets.xWebSocket("ws://127.0.0.1:4502/GenericText", jXSockets.WEBSOCKET);

            //Bind open/close
            bindSocketEvents();
            
            //Logon
            $("#logon").click(function () {

                if ($('#chatName').val().length > 0) {
                    var userName = $('#chatName').val();
                    $('#yourusername').text(userName);
                    attachEvents();
                    $('#loginDiv').fadeOut();
                    $('#chatDiv').fadeIn();
                }
                else {
                    alert("You have to provide a username!");
                }
            });

            //send chatmessage
            $("#send").click(function () {
                if ($('#message').val().length == 0)
                    return;

                SendMessage($('#message').val());

                $('#message').val('').focus();
            });
        });

        function SendMessage(text) {
            var rnd = Math.floor(Math.random()*101) * 10;
            var json =
                    {
                        Message: text,
                        UserName: $('#yourusername').text(),
                        When: GetTime()
                    };

                    ws.trigger("OnChatMessage", json);                    
        }

        // Deal with our WebSockets Events
        function attachEvents() {
            //We listen to the event that we also trigger onclick.
            ws.bind("OnChatMessage", function (d) {
                $("<p>").text(d.Message).prependTo('#messages');
            });            

            ws.bind("OnClientConnect", function (f) {
                //Your logic here                
            });

            //If an error occurs
            ws.bind("FailConnect", function (msg) {
                $('#errDiv').text(msg.Message);
                hideChatElements();
            });
        }
        
        function hideChatElements() {
            $("#chatDiv").hide();
            $("#loginDiv").hide();
        }

        function bindSocketEvents() {
            ws.bind("close", function (msg) {
                $('#infoDiv').text("No xSocketConnection :(");
                $('#serverinfoDiv').text('');
                hideChatElements();
            });

            ws.bind("FailConnect", function (msg) {
                $('#errDiv').text(msg.Message);
                hideChatElements();
            });

            ws.bind("open", function (msg) {                
                $("#loginDiv").show();                
            });
        }

        function GetTime() {
            var today = new Date();
            var h = today.getHours();
            var m = today.getMinutes();
            var s = today.getSeconds();
            m = checkTime(m);
            s = checkTime(s);
            var now = h + ":" + m + ":" + s;
            return now;
        }

        function checkTime(i)
        {
            if (i<10)
            {
                i="0" + i;
            }
            return i;
        }
    </script>
    <style type="text/css">
        body
        {
            font: 75.5% "Trebuchet MS" , sans-serif;
            margin: 50px;
        }
    </style>
</head>
<body>

    <img src="xsockets_logo.jpg" alt="RealTimeWeb" />    
    <div id="infoDiv"></div>
    <div id="serverinfoDiv"></div>
    <div id="errDiv"></div>
    <div id="loginDiv">
        <label>
            Enter a username:</label>
        <input type="text" id="chatName" />
        <button id="logon">
            Chat
        </button>
    </div>
    <div id="chatDiv">
        <div id="yourusername">
        </div>
        <textarea rows="5" cols="25" id="message"></textarea>
        <button id="send">
            Send
        </button>
        <div id="messages">
        </div>
    </div>
</body>
</html>
